<template>
  <gui-page>
    <!-- 页面主体内容 -->
    <view slot="gBody">
      <view class="store-list-container">
        <!-- 店铺列表 -->
        <view
          class="store-item"
          v-for="(store, storeIndex) in supplierList"
          :key="storeIndex"
          @click="toSupplierInfo(store.id)"
        >
          <view class="store-header">
            <text class="store-name">{{ store.name }}</text>
            <text class="store-distance"
              >距离：{{ (store.distance / 1000).toFixed(2) }}km</text
            >
          </view>

          <view class="brand-list">
            <view
              class="brand-item"
              v-for="(brand, brandIndex) in store.brand_data"
              :key="brandIndex"
            >
              <image
                :src="brand.logo_url"
                class="brand-logo"
                mode="fill"
              ></image>
              <text class="brand-name">{{ brand.name }}</text>
            </view>
          </view>

          <div v-if="store.brand_data.length === 0" class="empty-order">
            <gui-image
              src="https://cdn.duyumy.com/accessory/0fe61301ec884459440a85e2fcd72d1ae98c46da.png"
            ></gui-image>
            <div style="font-size: 28rpx; color: #999; margin-top: -52rpx">暂无品牌~</div>
          </div>
        </view>
      </view>
    </view>
  </gui-page>
</template>

<script setup>
import { ref } from "vue";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import { getAroundSupplierListWithBrand } from "@/apiShop/home";
// 是否有更多数据
const hasMore = ref(true);

// 加载更多数据
const loadMore = () => {
  // 模拟异步加载数据
};

const toSupplierInfo = (id) => {
  uni.navigateTo({
    url: `/pagesShop/supplier/supplierInfo?id=${id}&location=${JSON.stringify(
      loaction.value
    )}`,
  });
};
// 店铺列表数据
const supplierList = ref([]);
// 获取附近的所有供应商
const getSupplierList = async () => {
  const ress = await getAroundSupplierListWithBrand({
    user_lat: loaction.value.latitude,
    user_lng: loaction.value.longitude,
    limit: 99,
    page: 1,
  });
  supplierList.value = ress.data;
};

const loaction = ref({
  latitude: undefined,
  longitude: undefined,
});

onLoad((options) => {
  if (options) {
    loaction.value = JSON.parse(options.loaction);
    getSupplierList();
  }
});
onReachBottom(() => {
  loadMore();
});
</script>

<style scoped>
.store-list-container {
  padding: 20rpx;
  background-color: #f5f5f5;
}

.store-item {
  background-color: #ffffff;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.store-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20rpx;
  border-bottom: 1px solid #f0f0f0;
}

.store-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.store-distance {
  font-size: 26rpx;
  color: #666;
}

.brand-list {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx 0;
}

.brand-item {
  width: 30.33%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10rpx;
}

.brand-logo {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 10rpx;
}

.brand-name {
  font-size: 24rpx;
  color: #333;
  text-align: center;
}

.loading-more {
  text-align: center;
  padding: 20rpx 0;
}

.loading-text {
  font-size: 28rpx;
  color: #999;
}

.empty-order {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  flex-direction: column;
}
</style>
